<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>

<div id="app">
    <template>
        <el-card shadow="always" style="margin-top: 1%">
            <div slot="header" class="clearfix">
                <span>表基础信息</span>
            </div>
            <el-form ref="form" :rules="rules" :model="form" label-width="150px" style="margin-top: 2%">
                <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;margin-left: 10%;margin-right: 10%">
                    <el-form-item label="表中文名称" prop="tableName">
                        <el-input v-model="form.tableName" size="small" style="width: 200px"
                                  placeholder="请输入表中文名称(示例:用户表)"></el-input>
                    </el-form-item>
                    <el-form-item label="表英文名称" prop="tableEnName">
                        <el-input v-model="form.tableEnName" size="small" style="width: 200px"
                                  placeholder="请输入英文表名称(t_test)"></el-input>
                    </el-form-item>
                    <el-form-item label="是否生成基础字段">
                        <el-radio-group v-model="form.genBaseField" size="small">
                            <el-radio label="是"></el-radio>
                            <el-radio label="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>

            </el-form>
        </el-card>


        <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                style="margin-top: 1%"
                @click="handleAdd"
        >
            新增行
        </el-button>
        <el-table
                v-loading="loading"

                :data="tableData" row-key="id"
                :header-cell-style="{'text-align':'center','color':'grey','font-weight':'600'}"
                :cell-style="{'text-align':'center'}" border style="margin-top: 1%"
        >
            <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label">
                <template slot-scope="scope">
                    <el-input size="mini" v-show="column.prop !== 'fieldType' && column.prop !== 'defaultNull'"
                              v-model="scope.row[column.prop]"
                              :placeholder="column.placeholder"></el-input>

                    <el-select size="mini" v-show="column.prop ==='fieldType'" v-model="scope.row.fieldType"
                               placeholder="请选择" @change="handleFieldTypeChange(scope.row)">
                        <el-option label="字符串" value="STRING"></el-option>
                        <el-option label="小整形" value="TINYINT"></el-option>
                        <el-option label="整形" value="INT"></el-option>
                        <el-option label="长整形" value="BIGINT"></el-option>
                        <el-option label="浮点型" value="BIGDECIMAL"></el-option>
                        <el-option label="文本" value="TEXT"></el-option>
                        <el-option label="文本域" value="TEXTAREA"></el-option>
                        <el-option label="时间" value="LOCALDATETIME"></el-option>
                    </el-select>


                    <el-select size="mini" v-show="column.prop ==='defaultNull'" v-model="scope.row.defaultNull"
                               placeholder="请选择是否允许为空">
                        <el-option label="是" value="true"></el-option>
                        <el-option label="否" value="false"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="info" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <div style="text-align: center;margin-top: 2%">
            <el-button size="small" type="danger" icon="el-icon-delete" @click="emptyTable">清空表格</el-button>
            <el-button size="small" type="primary" icon="el-icon-plus" @click="createTable">一键建表</el-button>
        </div>

    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/gen.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: false,
                cloumns: [],
                form: {
                    genBaseField: "是"
                },
                tableHeight: document.documentElement.scrollHeight - 245 + "px",
                tableData: [
                    {
                        fieldName: '名称',
                        fieldType: 'STRING',
                        fieldLength: 255,
                        defaultNull: "true",
                        defaultValue: "",
                        sort: '1'
                    },
                ],
                rules: {
                    tableName: [
                        {required: true, message: '请输入表中文名称', trigger: 'blur'},
                    ],
                    tableEnName: [
                        {required: true, message: '请输入表英文名称', trigger: 'blur'},
                    ],

                },
                tableColumns: [
                    {label: '字段名称', prop: 'fieldName', placeholder: '请输入字段名称(中文)'},
                    {label: '字段类型', prop: 'fieldType', placeholder: '请选择字段类型'},
                    {label: '字段长度', prop: 'fieldLength', placeholder: '请输入字段长度'},
                    {label: '是否允许为空', prop: 'defaultNull', placeholder: '请选择是否为空'},
                    {label: '字段默认值', prop: 'defaultValue', placeholder: '请输入字段默认值'},
                    {label: '字段排序', prop: 'sort', placeholder: '请输入字段排序'},
                ],

            }
        },
        created() {

        },
        methods: {
            handleFieldTypeChange(row) {
                if (row.fieldType === 'INT') {
                    row.fieldLength = 11;
                } else if (row.fieldType === 'STRING') {
                    row.fieldLength = 255;
                } else if (row.fieldType === 'TINYINT') {
                    row.fieldLength = 4;
                } else if (row.fieldType === 'BIGINT') {
                    row.fieldLength = 20;
                } else if (row.fieldType === 'BIGDECIMAL') {
                    row.fieldLength = 2;
                } else if (row.fieldType === 'TEXTAREA') {
                    row.fieldLength = 2000;
                } else {
                    row.fieldLength = ""
                }
            },

            createTable() {


                let params = {}
                if (!this.form.tableName) {
                    this.$notify({
                        title: '失败',
                        message: '请输入表中文名称',
                        type: 'error'
                    });
                    return
                }
                if (!this.form.tableEnName) {
                    this.$notify({
                        title: '失败',
                        message: '请输入表英文名称',
                        type: 'error'
                    });
                    return
                }
                params.tableName = this.form.tableName;
                params.tableEnName = this.form.tableEnName;
                params.genBaseField = this.form.genBaseField === '是';
                params.fieldRequestList = this.tableData
                console.log(params)
                requests.post("/tool/table/createTable", params).then(res => {
                    if (res.code === '200') {
                        this.$notify({
                            title: '成功',
                            message: '建表成功',
                            type: 'success'
                        });
                    }
                })


            },
            emptyTable() {
                this.tableData = []
            },
            handleAdd() {
                // 新增一行
                this.tableData.push({
                    fieldName: '',
                    fieldType: 'STRING',
                    fieldLength: 255,
                    defaultNull: "true",
                    defaultValue: "",
                    sort: this.tableData.length + 1,
                    fieldComment: ''
                });
            },
            handleDelete(index) {
                // 删除指定行
                this.tableData.splice(index, 1);
            },

        }
    });
</script>
</html>
